<template>
  <div class="step4">
    <h2>{{ $t("breach.steps.step2.buttons.review") }}</h2>
    <div class="report-content">
      <h3>{{ $t("breach.steps.step4.content.title") }}</h3>
      <div class="create-time">
        {{ $t("breach.steps.step4.content.createtime") }}:
        {{ moment().format("YYYY-MM-DD HH:mm:ss") }}
      </div>
      <a-descriptions class="basic" bordered>
        <a-descriptions-item
          v-for="item in basiceRows"
          :key="item.value"
          :label="$t(item?.label)"
        >
          {{ reviewData[item.value] }}
        </a-descriptions-item>
      </a-descriptions>
      <div class="section-A">
        <h4>Section A: {{ $t("breach.steps.step4.content.a.basic") }}</h4>
        <a-descriptions
          :title="$t('breach.steps.step2.baseinfo.title')"
          class="basic mb-[0px]"
          bordered
          :column="1"
          v-if="updateDes"
        >
          <a-descriptions-item
            v-for="item in aBasicRows"
            :key="item.value"
            :label="$t(item?.label)"
          >
            <template v-if="item.value === 'EventDestination'">
              {{
                reviewData.EventDestination
                  ? $t(
                      whereList.filter(
                        (item) => item.value === reviewData.EventDestination
                      )[0]?.label
                    )
                  : ""
              }}
            </template>
            <template v-else>
              {{ reviewData ? reviewData[item.value] : "" }}
            </template>
          </a-descriptions-item>
        </a-descriptions>
        <div class="has-content has-top" v-if="breachMode === 2">
          <div class="content-title">
            {{ $t("breach.steps.step1.content.form.table.title") }}
          </div>
          <div class="content no-padding">
            <a-table
              :columns="employeeColumns"
              :dataSource="reviewData.EmployeeInformation"
              :pagination="false"
              bordered
            />
          </div>
        </div>
        <div
          class="supplement"
          v-for="(supplement, ind) in reviewData.BreachSupplement"
          :key="supplement.Id"
        >
          <a-descriptions
            :title="$t('breach.steps.step4.content.a.supplement') + (ind + 1)"
            class="supplement"
            :column="1"
            bordered
          >
            <a-descriptions-item
              v-for="item in aSupplementRows"
              :key="item.value"
              :label="$t(item?.label)"
            >
              {{ supplement[item.value] }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="section-B">
        <h4>Section B: {{ $t("breach.steps.step4.content.b.detail") }}</h4>
        <a-descriptions
          :title="$t('breach.steps.step4.content.b.detail.team')"
          class="detail hasNext"
          bordered
          :column="1"
        >
          <a-descriptions-item
            :label="$t('breach.steps.step4.content.b.detail.team.processor')"
          >
            {{ reviewData.EventProcessed }}
          </a-descriptions-item>
          <a-descriptions-item
            :label="$t('breach.steps.step4.content.b.detail.team.member')"
          >
            {{ reviewData.Member }}
          </a-descriptions-item>
        </a-descriptions>
        <div class="has-content has-top">
          <div class="content-title">
            {{ $t("breach.steps.step4.content.b.detail.record") }}
          </div>
          <div class="content">
            <a-table
              :columns="recordColumns"
              :dataSource="reviewData.log"
              :pagination="false"
              bordered
            />
          </div>
        </div>
        <div class="has-content">
          <div class="content-title">
            {{ $t("breach.steps.step4.content.b.detail.action") }}
          </div>
          <div class="content">
            <div class="has-content">
              <div class="content-title">
                {{ $t("breach.steps.step4.content.b.detail.team") }}
              </div>
              <div class="content no-padding">
                <a-table
                  :columns="actionColumns"
                  :dataSource="reviewData.action"
                  :pagination="false"
                  bordered
                />
              </div>
            </div>
          </div>
        </div>
        <div class="has-content">
          <div class="content-title">
            {{ $t("breach.steps.step4.content.b.detail.risk") }}
          </div>
          <div class="content">
            <div class="has-content">
              <div class="content-title">
                {{ $t("breach.steps.step4.content.b.detail.team") }}
              </div>
              <div class="content no-padding">
                <a-table
                  :columns="riskColumns"
                  :dataSource="reviewData.risk"
                  :pagination="false"
                  bordered
                />
              </div>
            </div>
          </div>
        </div>
        <div class="has-content">
          <div class="content-title">
            {{ $t("breach.steps.step4.content.b.detail.total") }}
          </div>
          <div class="content">
            {{ reviewData.EventSummary }}
          </div>
        </div>
      </div>
    </div>
    <div class="buttons mt-[20px]">
      <!-- 上一步 -->
      <a-button
        class="mr-[20px]"
        icon="left"
        type="primary"
        @click="$emit('changeCurrent', 2)"
        >{{ $t("breach.steps.step3.buttons.pre") }}</a-button
      >
      <!-- 关闭事件 -->
      <a-button
        v-if="breachDetail.EventStatus === 4"
        type="primary"
        class="mr-[20px]"
        :disabled="
          !role.includes('processor') ||
          !reviewData?.action ||
          reviewData?.action?.filter(
            (item) => item.BreachActionStatus !== '完成'
          )?.length !== 0
        "
        :loading="btnLoading"
        @click="closeEvent"
        >{{ $t("breach.steps.step1.content.buttons.close") }}</a-button
      >
      <!-- 报告下载 -->
      <a-button v-else type="primary" @click="downloadVisible = true">
        {{ $t("breach.steps.step4.buttons.download") }}
      </a-button>
    </div>
    <a-modal
      :title="$t('breach.steps.step4.modal.title')"
      :visible="downloadVisible"
      :closable="false"
      dialogClass="download-modal"
    >
      <div class="mb-[10px]">
        {{ $t("breach.steps.step4.modal.content.pre") }}{{ fileList.length
        }}{{ $t("breach.steps.step4.modal.content.aft") }}
      </div>
      <div class="file-lists">
        <a-checkbox-group v-model="selectedFiles">
          <a-checkbox
            v-for="item in fileList"
            :key="item.value"
            :value="item.value"
          >
            {{ item?.label }}
          </a-checkbox>
        </a-checkbox-group>
      </div>
      <div slot="footer" class="buttons">
        <a-button
          class="mr-[20px]"
          :disabled="!selectedFiles.length"
          type="primary"
          @click="downloadFiles"
          >{{ $t("breach.steps.step4.modal.title") }}</a-button
        >
        <a-button @click="downloadVisible = false">{{
          $t("app.setting.content-width.fluid2222333")
        }}</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import { whereList } from "@/staticLists/breach";
import {
  createReport,
  getReviewData,
  getReviewFileList,
} from "@/api/dataBreach/form";
import { createDataBreach } from "@/api/dataBreach/json";
export default {
  name: "step4",
  props: ["breachDetail", "breachMode", "lang", "role"],
  data() {
    return {
      basiceRows: [
        { label: "breach.steps.step4.content.cd", value: "EventDepartment" },
        {
          label: "breach.steps.step4.content.reportperson",
          value: "EventProcessed",
        },
        { label: "breach.steps.step4.content.reportno", value: "EventId" },
        {
          label: "breach.steps.step4.content.breachname",
          value: "EventShortDescription",
        },
        {
          label: "breach.steps.step1.content.form.findtime",
          value: "EventFindTime",
        },
        {
          label: "breach.steps.step1.content.form.starttime",
          value: "EventOccurrenceTime",
        },
      ],
      aBasicRows: [],
      aBasicRowsCopy: [
        { label: "breach.steps.step4.content.a.basic.id", value: "EventDlpId" },
        {
          label: "breach.steps.step4.content.a.basic.describe",
          value: "EventShortDescription",
        },
        {
          label: "breach.steps.step1.content.form.detail",
          value: "EventDetailDescription",
        },
        {
          label: "user.verification-code.required111566161",
          value: "EventType",
        }
      ],
      aSupplementRows: [],
      aSupplementRowsCopy: [
        {
          label: "breach.steps.step1.content.form.ifclose",
          value: "EventClose",
        },
        {
          label: "breach.steps.step4.content.a.supplement.ifagree",
          value: "SupplementProcessingActivities",
        },
        {
          label: "breach.steps.step4.content.a.supplement.iftrue",
          value: "SupplementRealData",
        },
        {
          label: "breach.steps.step4.content.a.supplement.info",
          value: "BreachSupplementPersonalInformationArr",
        },
        {
          label: "breach.steps.step2.business.form.owner",
          value: "SupplementController",
        },
        {
          label: "breach.steps.step2.business.form.where",
          value: "SupplementInternalSystems",
        },
        {
          label: "breach.steps.step2.business.form.call",
          value: "BreachSupplementDetailArr",
        },
        {
          label: "breach.steps.step2.business.form.number",
          value: "SupplementNumber",
        },
      ],
      recordColumns: [
        {
          title: () =>
            this.$t("breach.steps.step4.content.b.detail.record.user"),
          dataIndex: "LogUserName",
          key: "LogUserName",
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.steps.step4.content.b.detail.record.time"),
          dataIndex: "LogCreatetime",
          key: "LogCreatetime",
          align: "center",
        },
        {
          title: () => this.$t("di.menus"),
          dataIndex: "LogOperation",
          key: "LogOperation",
          align: "center",
        },
      ],
      actionColumns: [
        {
          title: () => this.$t("system.actionmanage.table.name"),
          dataIndex: "BreachActionName",
          key: "BreachActionName",
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.steps.step4.content.b.detail.action.describe"),
          dataIndex: "BreachActionInfo",
          key: "BreachActionInfo",
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.steps.step4.content.b.detail.action.owner"),
          dataIndex: "BreachActionUserResponsible",
          key: "BreachActionUserResponsible",
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.steps.step4.content.b.detail.action.createtime"),
          dataIndex: "BreachActionCreatetime",
          key: "BreachActionCreatetime",
          align: "center",
        },
        {
          title: () =>
            this.$t("user.login.message-invalid-verification-code0011"),
          dataIndex: "BreachActionStatus",
          key: "BreachActionStatus",
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.steps.step4.content.b.detail.action.result"),
          dataIndex: "BreachActionResult",
          key: "BreachActionResult",
          align: "center",
        },
      ],
      riskColumns: [
        {
          title: () => this.$t("user.verification-code.required111566125"),
          dataIndex: "RiskName",
          key: "RiskName",
          align: "center",
        },
        {
          title: () => this.$t("user.verification-code.required1115661105770"),
          dataIndex: "RiskSource",
          key: "RiskSource",
          align: "center",
        },
        {
          title: () => this.$t("user.verification-code.required111566161"),
          dataIndex: "RiskType",
          key: "RiskType",
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.steps.step4.content.b.detail.risk.owner"),
          dataIndex: "RiskOwnerUserName",
          key: "RiskOwnerUserName",
          align: "center",
        },
        {
          title: () => this.$t("breach.steps.step4.content.b.detail.risk.dco"),
          dataIndex: "RiskDcoUserName",
          key: "RiskDcoUserName",
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.steps.step4.content.b.detail.risk.createtime"),
          dataIndex: "RiskCreatetime",
          key: "RiskCreatetime",
          align: "center",
        },
        {
          title: () => this.$t("menu.list.table-list"),
          dataIndex: "RiskState",
          key: "RiskState",
          align: "center",
        },
      ],
      dataSource: [],
      downloadVisible: false,
      fileList: [],
      selectedFiles: [],
      updateDes: true,
      employeeColumns: [
        {
          title: () => this.$t("breach.steps.step4.content.a.employee.name"),
          dataIndex: "SupplementDetailName",
          key: "SupplementDetailName",
          align: "center",
        },
        {
          title: () => this.$t("breach.steps.step4.content.a.employee.email"),
          dataIndex: "SupplementDetailEmail",
          key: "SupplementDetailEmail",
          align: "center",
        },
        {
          title: () => this.$t("breach.steps.step4.content.a.employee.id"),
          dataIndex: "SupplementDetailPersonnelId",
          key: "SupplementDetailPersonnelId",
          align: "center",
        },
        {
          title: () => this.$t("breach.steps.step4.content.a.employee.lineup"),
          dataIndex: "SupplementDetailResponsibleEmail",
          key: "SupplementDetailResponsibleEmail",
          align: "center",
        },
      ],
      whereList,
      reviewData: {},
      downLoadInterval: {},
      downLoadInd: 0,
      btnLoading: false
    };
  },
  watch: {
    breachDetail: {
      handler() {
        this.updateDes = false;
        if (this.breachMode === 1) {
          this.aBasicRows = this.aBasicRowsCopy.filter((_, ind) => {
            return ind !== 0;
          });
          this.aSupplementRows = this.aSupplementRowsCopy.filter((_, ind) => {
            return ind !== 1;
          });
        } else {
          this.aBasicRows = this.aBasicRowsCopy;
          this.aSupplementRows = this.aSupplementRowsCopy;
        }
        this.updateDes = true;
      },
      immediate: true,
      deep: true,
    },
  },
  async mounted() {
    let { data } = await getReviewData({
      Id: this.breachDetail.Id,
      lang: this.lang ? 1 : 2,
    });
    this.reviewData = data;
    let { data: fileList } = await getReviewFileList({
      Id: this.breachDetail.Id,
    });
    this.fileList = fileList;
  },
  methods: {
    moment,
    async closeEvent() {
      this.btnLoading = true
      let { code } = await createDataBreach({
        Id: this.breachDetail.Id,
        EventStatus: 5,
      });
      if (code === 1) {
        // 生成报告
        for (let index = 1; index < 3; index++) {
          createReport({
            Id: this.breachDetail.Id,
            lang: index,
          });
        }
        this.$message.success(
          this.$t("user.verification-code.required111566110577308")
        );
        this.$emit("changeIfFlag", true);
        this.$router.push("/breach/list");
      }
      this.btnLoading = false
    },
    downloadFiles() {
      this.downLoadInterval = setInterval(() => {
        if (this.downLoadInd === this.selectedFiles.length) {
          // 下载完成
          this.downLoadInd = 0;
          clearInterval(this.downLoadInterval);
          return;
        }
        const a = document.createElement("a");
        a.style.display = "none";
        a.setAttribute("download", "");
        a.setAttribute("href", this.selectedFiles[this.downLoadInd++]);
        a.click(a);
      }, 200);
    },
  },
};
</script>

<style lang="less" scoped>
.step4 {
  .report-content {
    border: 2px solid #bbb;
    padding: 20px;
    h3 {
      font-size: 20px;
      text-align: center;
    }
    .create-time {
      display: flex;
      flex-direction: row-reverse;
    }
    :deep(.ant-descriptions) {
      margin: 10px 0;
      &.mb-\[0px\] {
        margin-bottom: 0;
      }
      &.hasNext {
        margin-bottom: 0;
        .ant-descriptions-view {
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;
        }
      }
      .ant-descriptions-item-label,
      .ant-descriptions-title {
        background-color: #f7f7f7;
      }
      .ant-descriptions-title {
        margin-bottom: 0;
        padding: 16px 24px;
        border: 1px solid #e8e8e8;
        border-bottom: 0;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        font-size: 14px;
        & + .ant-descriptions-view {
          border-top-left-radius: 0px;
          border-top-right-radius: 0px;
        }
      }
    }
    .has-content {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      margin-bottom: 10px;
      &.has-top {
        border-top: 0;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      .content-title {
        padding: 16px 24px;
        border-bottom: 1px solid #e8e8e8;
        background-color: #f7f7f7;
        font-weight: bold;
      }
      .content {
        padding: 16px 24px;
        &.no-padding {
          padding: 0;
          :deep(table) {
            border: 0;
            .ant-table-thead th:last-child,
            .ant-table-tbody tr td:last-child {
              border-right: 0;
            }
            .ant-table-tbody tr:last-child td {
              border-bottom: 0;
            }
          }
        }
      }
      :deep(.ant-table) {
        .ant-table-thead {
          background-color: #f7f7f7;
        }
      }
    }
  }
  .buttons {
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="less">
.download-modal {
  .ant-modal-title {
    position: relative;
    padding-left: 20px;
    &::before {
      content: "";
      height: 100%;
      width: 10px;
      background-color: #5877a1;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .ant-modal-body {
    padding: 12px 24px;
    .file-lists {
      border: 1px solid #e8e8e8;
      height: 90px;
      overflow-y: scroll;
      padding: 10px;
      border-radius: 4px;
    }
    .ant-checkbox-group label {
      display: block;
    }
    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
      margin-left: 0;
    }
  }
  .ant-modal-footer {
    border-top: 0;
  }
  .buttons {
    display: flex;
    justify-content: center;
  }
}
</style>